<script setup>
  import {computed} from "vue";
  import {useRouter} from "vue-router";
  import useCity from "@/stores/modules/city";

  const router = useRouter()
  const cityStore = useCity()
  //定义props
  const props = defineProps({
    groupList: {
      type: Object,
      default: () => ({})
    }
  })

  //动态索引
  const indexList = computed(() => {
    const list = props.groupList.cities.map(item => item.group)
    //unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
    list.unshift('#')
    return list
  })

  //监听城市点击
  const selectCity = city => {
    //将城市名添加进pinia
    cityStore.myCity = city
    router.back()
  }

</script>

<template>
  <div class="cityGroup">
    <!--城市展示-->
    <van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="热门"/>
      <div class="hotCityBox">
        <template v-for="item in groupList.hotCities"
                  :key="item.cityId">
          <div class="hotCity" @click="selectCity(item)">
            {{ item.cityName }}
          </div>
        </template>
      </div>

      <template v-for="(item,index) in groupList.cities" :key="index">
        <!--导航-->
        <van-index-anchor :index="item.group"/>

        <!--内容-->
        <template v-for="cityItem in item.cities"
                  :key="cityItem.cityId">
          <van-cell :title="cityItem.cityName" @click="selectCity(cityItem)"/>
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<style lang="less" scoped>
  .cityGroup {
    --van-index-bar-index-active-color: var(--primary-color);

    .hotCityBox {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 26px 10px 15px;

      .hotCity {
        flex-shrink: 0;
        text-align: center;
        width: calc(100% / 4 - 12px);
        line-height: 28px;
        background: #fff4ec;
        border-radius: var(--options-border-radius);
        margin: 6px;
      }
    }

  }
</style>